<template>
    <div>
      <el-button type="primary" @click="fun()">添加停车位用户</el-button>
    <el-table
    prop="id"
      :data="arr?arr.slice((currentPage-1)*pagesize,currentPage*pagesize):[]"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
        <el-table-column
          prop="ownerName"
          label="业主名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="ownerPhone"
          label="联系方式"
          width="180">
        </el-table-column>
        <el-table-column
          prop="parkNum"
          label="车位"
          width="180">
        </el-table-column>
        <el-table-column
          prop="carNum"
          label="车牌号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="feeStatus"
          label="缴费情况"
          width="180">
          <template slot-scope="scope">
        <el-tag :type="scope.row.feeStatus=='0'?'danger':'success'">{{scope.row.feeStatus=='0'?'未缴费':'已缴费'}}</el-tag></template>
        </el-table-column>
        <el-table-column
          prop="parkFee"
          label="缴费金额"
          width="180">
        </el-table-column>
        <el-table-column
          prop="parkFee"
          label="停车费余额"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
          <!-- 缴费 -->
        <el-button
          size="mini" plain type="primary"
          @click="handleEdit(scope.$index, scope.row)">缴费</el-button>
          <!-- 删除 -->
        <el-button
        type="danger" icon="el-icon-delete" circle
          @click="handleDelete(scope.$index, scope.row)"></el-button>
      </template>
        </el-table-column>
        <el-table-column align="right">
      <template slot="header" slot-scope="{}">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入id搜索"
          @change="searchfun()"
          clearable/>
      </template>
    </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      :page-sizes="[4, 8, 12, 16]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="arr.length"
    >
    </el-pagination>
    <el-dialog
  title="请填写用户信息"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="车位">
    <!-- <template slot-scope="scope"> -->
    <el-select v-model="form.car" clearable filterable placeholder="请选择" @change="selpark($event)">
      <el-option
          v-for="item in allparknum"
          :key="item.id"
          :label="item.parknum"
          :value="item.id">
      </el-option>
    </el-select>
    <!-- </template> -->
  </el-form-item>
  <el-form-item label="业主名">
    <el-input v-model="form.name" disabled></el-input>
  </el-form-item>
  <el-form-item label="联系方式">
    <el-input v-model="form.tel" disabled></el-input>
  </el-form-item>
  <el-form-item label="车牌号">
    <el-input v-model="form.carNum" disabled></el-input>
  </el-form-item>
  <el-form-item label="缴费金额">
    <el-input type="textarea" v-model="form.money"></el-input>
  </el-form-item>
  <el-form-item label="停车费余额">
    <el-input type="textarea" v-model="form.parkmoney" disabled></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add()">确 定</el-button>
  </span>
</el-dialog>
<div v-html="payform" ref="payform" ></div>
  </div>
</template>
  
  <script>
import { carfind,parkchange,parkdel} from "@/apis/hhp/link.js";
import { parkfei,findparknum ,selectpark,caradd} from "@/apis/hhp/hhplink.js";
export default {
  data() {
    return {
      arrp:"",
        // 默认显示第几页
        currentPage: 1,
        pagesize: 8,
            arr:[],
            currentPage3: 1,
            //对话框
            dialogVisible: false,
            search: '',
            index:"",
            money:"已缴费",
            allparknum:'',
            parknum:'',
            ownid:'',
            payform:'',
            cfid:'',
            form: {
              id:"",
              name: '',
              tel: '',
              car:'',
              cartype:'',
              cardid:'',
              delivery: false,
              money:''
        }
    };
  },
  methods: {
    //添加里面展示车牌号对应相关信息
    selpark(value){
      selectpark(value).then((ok)=>{
        console.log(value,"1111");
        console.log(ok);
        this.form.name=ok.data.data.ownName;
        this.form.tel=ok.data.data.ownPhone;
        this.form.carNum=ok.data.data.carNum;
        this.form.parkmoney=ok.data.data.totalParkFee;
        this.ownid=ok.data.data.id;
      })
    
    },
    // 每页显示的条数
    handleSizeChange(pagesize) {
      this.pagesize = pagesize;
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
    onSubmit() {
        console.log('submit!');
      },
        //缴费
        handleEdit(index, row) {
        console.log(index, row);
        this.$prompt('请输入缴费金额', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.cfid=row.id;
          this.$message({
            type: 'success',
            message: '你的缴费金额为: ' + value,
            
          });
          //修改缴费金额
          parkchange(this.cfid,value).then((ok)=>{
          console.log(ok);
          if(ok.data.code==200){
            this.payform=ok.data.data
            }
          this.$nextTick(()=>{
  //获得vue对象关联的payform对象(this.$refs.payform)，获得它的第一个子节点(children[0])，即为form标签，调用表单提交方法(submit())
        this.$refs.payform.children[0].submit();
         console.log(ok);
        })
        })
        parkfei().then((ok) => {
        this.arr = ok.data.data;
        this.arrp=ok.data.length;   
        }); 
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
    //删除
    handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          parkdel(row.id).then((ok)=>{
            console.log(ok);
          });
          parkfei().then((ok) => {
        this.arr = ok.data.data;
        this.arrp=ok.data.length;   
        }); 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //关闭提示
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(()=> {});
      },
    //查询单个用户
    searchfun() {
      console.log(this.search);
      carfind(this.search).then((ok) => {
        console.log(ok);
        this.arr = [ok.data];
      });
      if (this.search == "") {
        parkfei().then((ok) => {
          console.log(ok);
          this.arr = ok.data;
          console.log(this.arrp);
        });
      }
    },
     //增加用户
     fun(){
        this.dialogVisible=true;
      },
      add(){
        caradd( this.ownid,this.form.car,this.form.carNum,this.form.money).then((ok)=>{
          console.log(ok);
          this.dialogVisible=false;   
      }),
      parkfei().then((ok) => {
        this.arr = ok.data.data;
        this.arrp=ok.data.length;   
        })
      
  }
},
mounted() {
    parkfei().then((ok) => {
      console.log(ok);
      this.arr=ok.data.data;
      this.arrp=ok.data.length;
    }),
    //添加里面获取所有车牌号
    findparknum().then((ok)=>{
      console.log(ok);
      this.allparknum=ok.data.data;
      console.log(this.allparknum);
    })
  }
}
</script>
  

<style scoped lang="scss">
  .el-pagination{
  float: right;
}
</style>